<template>
  <view class="page-container">
    <!-- 顶部带背景色的导航栏 -->
    <view class="nav-bar">
      <image
        class="back-icon"
        src="../../static/icons/back.png"
        @tap="goBack"
      />
      <text class="nav-title">外出申请（{{ customerName }}）</text>
    </view>

    <!-- 滚动区域 -->
    <scroll-view class="scroll-content" scroll-y>
      <view class="form-wrapper">
        <!-- 客户姓名（只读） -->
        <view class="form-item">
          <text class="label">客户姓名</text>
          <input
            class="input readonly-input"
            v-model="form.customerName"
            readonly
          />
        </view>

        <!-- 外出事由 -->
        <view class="form-item">
          <text class="label">外出事由</text>
          <input
            class="input editable-input"
            v-model="form.reason"
            placeholder="请输入外出事由"
          />
        </view>

        <!-- 外出时间 -->
        <view class="form-item">
          <text class="label">外出时间</text>
          <picker
            mode="date"
            :value="form.outingDate"
            @change="onOutingDateChange"
          >
            <view class="picker editable-picker">
              {{ form.outingDate || '请选择外出时间' }}
              <image class="picker-icon" src="../../static/icons/calendar.png"/>
            </view>
          </picker>
        </view>

        <!-- 预计回院时间 -->
        <view class="form-item">
          <text class="label">预计回院时间</text>
          <picker
            mode="date"
            :value="form.expectedReturnDate"
            @change="onReturnDateChange"
          >
            <view class="picker editable-picker">
              {{ form.expectedReturnDate || '请选择预计回院时间' }}
              <image class="picker-icon" src="../../static/icons/calendar.png"/>
            </view>
          </picker>
        </view>

        <!-- 陪同人 -->
        <view class="form-item">
          <text class="label">陪同人</text>
          <input
            class="input editable-input"
            v-model="form.withWho"
            placeholder="请输入陪同人姓名"
          />
        </view>

        <!-- 与陪同人关系 -->
        <view class="form-item">
          <text class="label">与陪同人关系</text>
          <input
            class="input editable-input"
            v-model="form.relationship"
            placeholder="请输入与陪同人关系"
          />
        </view>

        <!-- 陪同人电话 -->
        <view class="form-item">
          <text class="label">陪同人电话</text>
          <input
            class="input editable-input"
            v-model="form.withWhoPhone"
            placeholder="请输入陪同人电话"
            type="number"
          />
        </view>
      </view>
    </scroll-view>

    <!-- 固定在底部的确认按钮 -->
    <view class="footer">
      <button class="btn-submit" @tap="onSubmit">确认</button>
    </view>
  </view>
</template>

<script>
import { addOutingRecord } from '@/api/client'

export default {
  name: 'OutingRequest',
  data() {
    return {
      customerId: null,
      customerName: '',
      form: {
        customerId: null,
        customerName: '',
        reason: '',
        outingDate: '',
        expectedReturnDate: '',
        withWho: '',
        relationship: '',
        withWhoPhone: '',
        approvalStatus: 1
      }
    }
  },
  onLoad(options) {
    this.customerId   = +options.customerId
    this.customerName = decodeURIComponent(options.customerName || '')
    this.form.customerId   = this.customerId
    this.form.customerName = this.customerName
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    onOutingDateChange(e) {
      this.form.outingDate = e.detail.value + ' 00:00:00'
    },
    onReturnDateChange(e) {
      this.form.expectedReturnDate = e.detail.value + ' 00:00:00'
    },
    async onSubmit() {
      const f = this.form
      if (!f.reason) {
        return uni.showToast({ title: '请输入外出事由', icon: 'none' })
      }
      if (!f.outingDate) {
        return uni.showToast({ title: '请选择外出时间', icon: 'none' })
      }
      if (!f.expectedReturnDate) {
        return uni.showToast({ title: '请选择预计回院时间', icon: 'none' })
      }
      if (!f.withWho) {
        return uni.showToast({ title: '请输入陪同人', icon: 'none' })
      }
      if (!f.relationship) {
        return uni.showToast({ title: '请输入与陪同人关系', icon: 'none' })
      }
      if (!f.withWhoPhone) {
        return uni.showToast({ title: '请输入陪同人电话', icon: 'none' })
      }
      const dto = {
        customerId: f.customerId,
        customerName: f.customerName,
        reason: f.reason,
        outingDate: f.outingDate,
        expectedReturnDate: f.expectedReturnDate,
        withWho: f.withWho,
        relationship: f.relationship,
        withWhoPhone: f.withWhoPhone,
        approvalStatus: f.approvalStatus
      }
      try {
        await addOutingRecord(dto)
        uni.showToast({ title: '外出申请提交成功', icon: 'success' })
        setTimeout(() => this.goBack(), 800)
      } catch (err) {
        console.error('添加外出申请失败', err)
      }
    }
  }
}
</script>

<style scoped>
.page-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f1f9f9;
}

/* 顶部导航 */
.nav-bar {
  display: flex;
  align-items: center;
  height: 130px;
  padding-top: 55px;
  padding: 0 16px;
  background-image: url('/static/images/background1.png');
  background-size: cover;
  background-position: center;
}
.back-icon {
  width: 24px; height: 24px;
}
.nav-title {
  flex: 1;
  text-align: center;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
}

/* 滚动区 */
.scroll-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 表单容器 */
.form-wrapper {
  padding: 16px;
   background: linear-gradient(to bottom, #ffffff 0%, #f1f9f9 100%);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  padding-bottom: 100px; /* 底部按钮空间 */
}
.form-item {
  margin-bottom: 16px;
}
.label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  color: #333;
}

/* 可编辑输入框 */
.editable-input {
  height: 36px;
  padding: 0 12px;
  border: 1px solid #00c3b0;
  border-radius: 6px;
  background-color: #fff;
  color: #333;
}
/* 只读输入框 */
.readonly-input {
  height: 36px;
  padding: 0 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background-color: #f5f5f5;
  color: #999;
}

/* 可编辑的日期选择 */
.editable-picker {
  border-color: #00c3b0;
  background-color: #fff;
}
/* 日期/时间选择器整体样式 */
.picker {
  height: 40px;                    /* 稍微调高，和输入框一致 */
  line-height: 40px;               /* 垂直居中 */
  padding: 0 12px;                 
  border: 1px solid #00c3b0;       /* 主色调边框 */
  border-radius: 8px;              /* 跟按钮、卡片圆角统一 */
  background-color: #ffffff;       /* 白底 */
  font-size: 14px;                 
  color: #333333;                  /* 文本颜色略深 */
  position: relative;
  transition: border-color .2s;    /* 悬停/聚焦时的过渡 */
}

/* 悬停和聚焦态 */
.picker:hover,
.picker:active {
  border-color: #00a89e;           /* 深一点的绿色 */
}

/* 图标样式 */
.picker-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  opacity: 0.6;
  transition: opacity .2s;
}
.picker:hover .picker-icon,
.picker:active .picker-icon {
  opacity: 1;
}

/* 当没有选择值时的 placeholder 颜色 */
.picker[placeholder] {
  color: #999999;
}

/* 如果你想在下拉选择器选中后，文字颜色更突出： */
.picker.selected {
  color: #00c3b0;
}

/* 示例：如果要禁用某个 picker，可以加上 disabled 样式 */
.picker.disabled {
  border-color: #e0e0e0;
  background-color: #f5f5f5;
  color: #bbbbbb;
}

/* 底部按钮 */
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  background-color: #fff;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}
.btn-submit {
  width: 100%;
  height: 40px;
  background-color: #00c3b0;
  color: #fff;
  font-size: 16px;
  border-radius: 20px;
}
</style>
